<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 14:04:56
 * @LastEditors: HeAo
 * @LastEditTime: 2021-11-26 17:49:06
-->
<template>
  <div>
    <!-- 头部区域 -->
    <div class="header">
      <div class="containor">
        <!-- 点击行学天下时，跳转至首页，使用$router.go(-1) -->
        <div class="name" @click="$router.go(-1)">
          <img
            src="../assets/hhxy.png"
            alt="图片丢失"
            width="360px"
            height="80px"
          />
          </div>
        <div class="telephone">
          <img
            src="../assets/telephone.png"
            alt="图片丢失"
            width="25px"
            height="25px"
          />
          <router-link to="/contact us">联系我们</router-link>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="contentBox">
        <div class="title">{{ project.name }}</div>
        <div class="details" v-html="project.details"></div>
      </div>
    </div>
  </div>
</template>
<script>
// 导入请求工具
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
      categories: [],
      project: {},
    };
  },
  methods: {
    // 查询所有栏目信息
    findAllCategories() {
      // 使用axios封装的get方法，发送ajax请求，拿到所有的栏目数据
      get("/index/category/findAll").then((res) => {
        // 将后台接口响应的数据，设置到组件的数据模型中
        this.categories = res.data;
      });
    },
    // 根据id查询项目的详情
    findProjectById(id) {
      get("/index/project/findById", { id }).then((res) => {
        this.project = res.data;
      });
    },
  },
  created() {
    this.findAllCategories();
    // 通过访问this.$route来获取跳转携带的参数
    const id = this.$route.query.id;
    // 将id作为实参，传递到查询项目详情的方法中
    this.findProjectById(id);
  },
};
</script>

<style scoped>
.header {
  /* display: flex; */
  height: 80px;
  font-family: "微软雅黑";
  box-shadow: 0 0 5px 5px rgba(153, 153, 153, 0.329);
}
.containor {
  width: 90%;
  margin: 0 auto;
  height: 80px;
}
/* 为因为子元素浮动产生高度塌陷的父元素清除浮动 => 使用伪元素来清除浮动 */
.containor::after {
  display: block;
  clear: both;
  content: "";
}
.name {
  float: left;
  font-size: 22px;
  font-weight: bold;
  color: #555;
  height: 80px;
  line-height: 80px;
  cursor: pointer;
}
.category {
  float: left;
  display: flex;
  margin: 0;
  padding: 0 1em;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  color: #666;
}
.category > li {
  padding: 0 16px;
  cursor: pointer;
}
.telephone {
  float: right;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  font-weight: bold;
  color: #888;
  cursor: pointer;
}
.telephone > img {
  position: relative;
  top: 5px;
  margin-right: 10px;
}
.contentBox {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  font-family: "微软雅黑";
}
.title {
  height: 50px;
  line-height: 50px;
  font-size: 28px;
  font-weight: bold;
}
.author {
  height: 30px;
  line-height: 30px;
  font-size: 20px;
}
.dateTime {
  height: 50px;
  line-height: 50px;
  font-weight: bold;
}
a {
    text-decoration: none;
    color: rgb(107, 105, 105);
  }
</style>